<template>
  <div class="page-fs">
    <a-form
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-row>
        <template
          v-for="(formItemConfig, _index) in { ...formConfig }"
          :key="_index"
        >
          <a-col
            v-if="!formItemConfig.hiddenForm && formItemConfig.name"
            :span="8"
          >
            <a-form-item :label="formItemConfig.title">
              <template v-if="formItemConfig.component">
                <component
                  :is="formItemConfig.component"
                  :key="formItemConfig"
                  v-model:form-data="dataForm[formItemConfig.name]"
                />
              </template>
              <template v-else-if="formItemConfig.dictList || formItemConfig.type === 'customer'">
                <a-select
                  v-model:value="dataForm[formItemConfig.name]"
                  :mode="formItemConfig.type === 61 ? 'multiple' : ''"
                >
                  <template
                    v-for="item in formItemConfig.dictList"
                    :key="item.val"
                  >
                    <a-select-option :value="item.val">
                      {{ item.name }}
                    </a-select-option>
                  </template>
                </a-select>
              </template>
              <template v-else-if="formItemConfig.type === 42">
                <NtdTagsSelect v-model:checks="dataForm[formItemConfig.name]" />
              </template>
              <template v-else-if="formItemConfig.type === 48">
                <NtdParamsSelect v-model:defaultIds="dataForm[formItemConfig.name]" />
              </template>
              <template v-else-if="formItemConfig.type === 3">
                <a-date-picker
                  v-model:value="dataForm[formItemConfig.name]"
                  style="width: 100%"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </template>
              <template v-else-if="formItemConfig.type === 2">
                <a-input-number
                  v-model:value="dataForm[formItemConfig.name]"
                  style="width: 100%"
                />
              </template>
              <template v-else-if="formItemConfig.type === 18">
                <ntd-cron v-model:value="dataForm[formItemConfig.name]" />
              </template>
              <template v-else-if="[161, 162, 163, 164].includes(formItemConfig.type)">
                <NtdUpload v-model:fileKey="dataForm[formItemConfig.name]" />
              </template>
              <template v-else>
                <template v-if="formItemConfig.name == extendJsonStr">
                  <a-input
                    v-model:value="dataForm[formItemConfig.name]"
                    @change="initForm"
                  />
                </template>
                <template v-else>
                  <a-input v-model:value="dataForm[formItemConfig.name]" />
                </template>
              </template>
            </a-form-item>
          </a-col>
        </template>
      </a-row>
    </a-form>
    <div style="text-align: right">
      <a-button
        style="margin-right: 10px"
        @click="cancel"
      >
        取消
      </a-button>
      <a-button
        type="primary"
        @click="updateData"
      >
        确定
      </a-button>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import utilAnt from '@/config/frame/ant/util/util-ant'
import contextModel from './context/context-model'
import NtdCron from "@/components/ntd-cron-select/NtdCron.vue"
import NtdUpload from '@/components/ntd-upload/NtdUpload'
import NtdTagsSelect from '@/components/ntd-tags-select'
import NtdParamsSelect from '@/components/ntd-params-select/index'

let context
let _this

export default {
  components: { NtdCron, NtdUpload, NtdTagsSelect, NtdParamsSelect },
  props: {
    form: { type: Object,  default: () => {} },
    cancel: { type: Function, default: () => {} },
    initList: { type: Function, default: () => {} }
  },
  data() {
    return {
      dataForm: ref(this.form || {}),
      formConfig: {},
      formRules: {},
      extendJsonStr: 'extendJson'
    }
  },
  async mounted() {
    _this = this
    await this.initContext()
    initForm(this.dataForm)
    this.initAttribute()
  },
  methods: {
    async initContext() {
      context = await contextModel.init(this.$route, this.dataForm)
      this.formConfig = context.rule.formConfig || {}
      this.formRules = context.rule.formRules || {}
      this.extendJsonStr = context.rule.extendJsonStr || this.extendJsonStr
      this.formConfig = { ...context.rule.formConfig, ...context.rule.extendFormConfig }
    },
    initAttribute() {
      Object.values(this.formConfig).forEach(attribute => {
        if ([16, 17, 41, 42].includes(attribute.type) && !this.dataForm[attribute.name]) {
          this.dataForm[attribute.name] = ref([])
        }
        if (attribute.formOnChange) {
          _this.$watch(() => _this.dataForm[attribute.name], val => {
            _this.formConfig = { ...context.rule.formConfig, ...attribute.formOnChange(val, _this.form) }
          }, { immediate: true })
        }
        // if ([3].includes(attribute.type) && this.dataForm[attribute.name]) {
        //   this.dataForm[attribute.name] = moment(this.dataForm[attribute.name], 'yyyy-MM-dd')
        // }
      })
    },
    updateData() {
      context.api[this.dataForm.id === undefined ? 'add' : 'edit'](onFormSubmit(this.dataForm)).then(() => {
        utilAnt.msg()
        this.cancel()
        this.initList()
      })
    },
    initForm() {
      initForm(this.dataForm)
    }
  }
}

function initForm(form = {}) {
  if (form[_this.extendJsonStr]) {
    const extendJson = JSON.parse(form[_this.extendJsonStr])
    Object.keys(extendJson).forEach(item => {
      form['__' + item] = extendJson[item]
    })
  }
}

function onFormSubmit(form = {}) {
  const extendObj = {}
  let extendTag = false
  Object.keys(form).forEach(item => {
    if (item.startsWith('__')) {
      extendObj[item.substr(2)] = form[item]
      delete form[item]
      extendTag = true
    }
    if (item.startsWith('isTrusted')) {
      delete form[item]
    }
  })
  if (extendTag) {
    form[_this.extendJsonStr] = JSON.stringify(extendObj)
  }
  return form
}

</script>

<style scoped>

</style>
